<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lmlq Mill</title>
    <link rel="stylesheet" href="./css/muse-ui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/publiic.css">
    <link rel="stylesheet" href="./css/news.css">
</head>

<body id="index">
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="head-nav">
                <mu-row>
                    <mu-col span="2" class="logo">
                        <div class="grid-cell">
                            <a href="./index.html" target="index">
                                <img src="./img/left.png" alt="logo">
                            </a>
                        </div>
                    </mu-col>
                    <mu-col span="8" class="page-nav">
                        <div class="nav-title">
                            <span>Home > <strong>News</strong></span>
                        </div>
                    </mu-col>
                    <mu-col span="2" class="index-menu">
                        <div class="grid-cell">
                            <mu-menu cover placement="left" :open.sync="open">
                                <mu-button icon>
                                    <img src="./img/list_icon2.png" alt="">
                                </mu-button>
                                <mu-list slot="content">
                                    <mu-list-item button href="index.html">
                                        <mu-list-item-title>Home</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="products_l.html">
                                        <mu-list-item-title>Products</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="case_l.html">
                                        <mu-list-item-title>Case</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="news_l.html">
                                        <mu-list-item-title>News</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="about.html">
                                        <mu-list-item-title>About</mu-list-item-title>
                                    </mu-list-item>
                                    <mu-list-item button href="contact.html">
                                        <mu-list-item-title>Contact us</mu-list-item-title>
                                    </mu-list-item>
                                </mu-list>
                            </mu-menu>
                        </div>
                    </mu-col>
                </mu-row>
            </div>
        </header>
        <!-- banner -->
        <div class="news-banner">
            <img src="./img/nc_banner.png">
            <a href="index.html"></a>
        </div>
        <!-- 内容 -->
        <article>
            <!-- 新闻文章 -->
            <div class="content">
                <div class="content-box">
                    <span class="dec-bar"></span>
                    <p>1. Aiming at the characteristics of clay minerals such as high water content, strong cohesiveness
                        and easy moisture absorption, the European type grinding mill optimizes the main machine
                        grinding device and the structure of the blade to increase the output and no largr particles
                        appear in the finished product.</p>
                    <p>2. Equipped with a cage turbine classifier, unique flow field design and constant gas-solid
                        concentration control technlogy, so that the finished ore powder has a uniform output size
                        without large particles, and ensures the long-term stable operation of the system customers.</p>
                    <img src="./img/news_img01.jpg">
                    <p>3. The ingenious arc-shaped air duct, the airflow resistance is small, the dispersion of the
                        material, especially for the clay minerals with strong cohesiveness, it is not easy to block the
                        material.</p>
                    <p>4. The beautiful arc-shaped appearance design highlights the humanity and reduces the risk factor
                        of manual operation.</p>
                    <p>5. Acccording to the proportion of clay mineral impurities, the mill system designs a slag
                        discharge device at a reasonable position, which has high slag discharge efficiency,
                        effectivvely controls the purity of the finished product and improves product quality.</p>

                    <div class="news-more">
                        <ul>
                            <li class="under-dash">
                                <a href="news_d.html"><span>Previous</span> What is the price of vertical mill...</a>
                            </li>
                            <li>
                                <a href="news_d.html"><span>Next</span> A powerful tool for processing...</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 相关新闻 -->
            <div class="news-r">
                <h2 class="r-title"><img src="./img/star_r.png">Related News</h2>
                <div class="list-box news">
                    <mu-list>
                        <mu-list-item avatar button :ripple="false" href="news_d.html">
                            <mu-col span="4" class="news-r-img">
                                <img src="./img/r_news01.jpg">
                            </mu-col>
                            <mu-col span="8" class="news-r-title">
                                <p>Liming New MB5X Series Grinding Mill for Limestone</p>
                                <p class="news-time">
                                    <img src="./img/time_icon.png">
                                    2019-06-28
                                </p>
                            </mu-col>
                        </mu-list-item>
                        <mu-list-item avatar button :ripple="false" href="news_d.html">
                            <mu-col span="4" class="news-r-img">
                                <img src="./img/r_news02.jpg">
                            </mu-col>
                            <mu-col span="8" class="news-r-title">
                                <p>Liming New MB5X Series Grinding Mill for Limestone</p>
                                <p class="news-time">
                                    <img src="./img/time_icon.png">
                                    2019-06-28
                                </p>
                            </mu-col>
                        </mu-list-item>
                        <mu-list-item avatar button :ripple="false" href="news_d.html">
                            <mu-col span="4" class="news-r-img">
                                <img src="./img/r_news03.jpg">
                            </mu-col>
                            <mu-col span="8" class="news-r-title">
                                <p>Liming New MB5X Series Grinding Mill for Limestone</p>
                                <p class="news-time">
                                    <img src="./img/time_icon.png">
                                    2019-06-28
                                </p>
                            </mu-col>
                        </mu-list-item>
                        <mu-list-item avatar button :ripple="false" href="news_d.html">
                            <mu-col span="4" class="news-r-img">
                                <img src="./img/r_news04.jpg">
                            </mu-col>
                            <mu-col span="8" class="news-r-title">
                                <p>Liming New MB5X Series Grinding Mill for Limestone</p>
                                <p class="news-time">
                                    <img src="./img/time_icon.png">
                                    2019-06-28
                                </p>
                            </mu-col>
                        </mu-list-item>
                    </mu-list>
                </div>
            </div>
            <!-- 产品推荐 -->
            <div class="product-r">
                <h2 class="r-title"><img src="./img/star_r.png">Related Equipment</h2>
                <div class="list-box products">
                    <mu-row>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/LM.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW-Z.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MW.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                        <mu-col span="6">
                            <div class="grid-cell pro-card hotsale_pro">
                                <a href="product_d.html">
                                    <div class="pro-img-box">
                                        <img class="pro-img" src="./img/MTW.jpg">
                                    </div>
                                    <div class="pro-title">
                                        <h4>LM Vertical Millr</h4>
                                        <p><strong>Input Size:</strong> ≤15 - ≤30mm</p>
                                    </div>
                                </a>
                            </div>
                        </mu-col>
                    </mu-row>
                </div>
            </div>
        </article>
        <!-- 底部 -->
        <footer>
            <!-- 联系我们 -->
            <div class="form-box">
                <div class="form-banner">
                    <img src="./img/form_banner.png" alt="">
                </div>
                <div class="form-inquery">
                    <mu-form id="msgForm" ref="form" :model="validateForm" class="mu-demo-form">
                        <mu-form-item :rules="nameRules" prop="name">
                            <mu-text-field v-model="validateForm.name" placeholder="Full Name" class="input1">
                            </mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="telRules" prop="number">
                            <mu-text-field v-model="validateForm.number" type="number" placeholder="Call Number"
                                class="input2"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item :rules="messageRules" prop="message" class="messa">
                            <mu-text-field v-model="validateForm.message" multi-line :rows="4"
                                placeholder="If you would like to share more information about your project, such as application field, product size, equipment purchase time…，please leave message here."
                                class="input3"></mu-text-field><br />
                        </mu-form-item>
                        <mu-form-item>
                            <mu-button @click="submit">ORDER NOW</mu-button>
                        </mu-form-item>
                    </mu-form>
                </div>
            </div>

            <div class="foot-chat">
                <a class="chat-link" href="#">
                    <img src="./img/chat_icon.png">
                    <span>Chat Online</span>
                </a>
            </div>
        </footer>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/muse-ui.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                open: false,
                active3: 0,
                validateForm: {
                    name: '',
                    number: '',
                    message: ''
                },
                rules: [{
                    validate: (val) => !!val,
                    message: 'Cannot be empty'
                }],
                nameRules: [{
                        validate: (val) => !!val,
                        message: 'Name cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of user name is greater than 3'
                    }
                ],
                telRules: [{
                        validate: (val) => !!val,
                        message: 'Phone number cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3 && val.length < 12,
                        message: 'Phone number format error'
                    }
                ],
                messageRules: [{
                        validate: (val) => !!val,
                        message: 'Message cannot be empty'
                    },
                    {
                        validate: (val) => val.length >= 3,
                        message: 'The length of message is greater than 3'
                    }
                ],
            }
        },
        methods: {
            submit() {
                this.$refs.form.validate().then((result) => {
                    if (result) {
                        document.querySelector('#msgForm').submit()
                    }
                });
            },
        }
    });
</script>

</html>